<template>
  <div id="map" class="map">
    <div id="mouse-position"></div>
    <img class="img" src="@/img/卫星.jpg" alt="" @click="changeToImg()" />
    <img class="vector" src="@/img/地图.jpg" alt="" @click="changeToVector()" />
    <!-- 路况 -->
    <Road :map="map" />
    <!-- 热力图 -->
    <HotMaps :map="map" />
    <!-- 查看公告 -->
    <ReadNotices />
    <!-- 发布处理 -->
    <HandleNotice :map="map" />
    <!-- 报告路况 -->
    <Modal />
    <!-- 审核事件 -->
    <Audit />
    <!-- 目录树 -->
    <LayerTree :map="map" v-if="options.traffic" />
    <!-- 视频监控 -->
    <Monitor :map="map" />
    <!-- 添加事件 -->
    <AddEvent :map="map" />
    <!-- 查询事件 -->
    <QueryEvent :map="map" />
    <!-- 更新事件 -->
    <UpdateEvent :map="map" />
    <!-- 搜索框查询 -->
    <Search :map="map" />
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, computed, reactive } from 'vue' // vue相关方法
import '@/style/control.css'
import mitt from '@/mitt'
import {
  HotMaps,
  Road,
  ReadNotices,
  HandleNotice,
  Modal,
  Audit,
  LayerTree,
  Monitor,
  AddEvent,
  QueryEvent,
  UpdateEvent,
  Search,
} from '@/components'
import { Measure } from '@/utils/Measure.js'
import { MeasureTool } from '@/utils/MeasureTool.js'
import Image from '@/Hooks/Image'
import { CreateMap } from '@/Hooks/CreateMap'
import { useStore } from 'vuex'
const { initMap } = CreateMap()
const { save } = Image()
const map = reactive({})
onMounted(() => {
  initMap(map)
})
const $store = useStore()
const options = JSON.parse(JSON.stringify($store.state.options))
function length() {
  const Map = map.value
  const typeSelect = 'LineString'
  MeasureTool.LineString({ map: Map, type: typeSelect })
}
function area() {
  const Map = map.value
  const typeSelect = 'Polygon'
  MeasureTool.Area({ map: Map, type: typeSelect })
}
const changeToImg = () => {
  const layers = map.value.getLayers().getArray()
  layers[2].setVisible(false)
  layers[3].setVisible(false)
}
const changeToVector = () => {
  const layers = map.value.getLayers().getArray()
  layers[2].setVisible(true)
  layers[3].setVisible(true)
}
const saveImg = () => {
  save(map)
}
const remove = () => {
  map.value.getLayers().getArray().splice(5, 2)
  map.value.getOverlays().clear()
  location.reload()
}
mitt.on('saveimg', saveImg)
mitt.on('addarea', area)
mitt.on('addlength', length)
mitt.on('remove', remove)
onUnmounted(() => {
  mitt.off('saveimg', saveImg)
  mitt.off('addarea', area)
  mitt.off('addlength', length)
  mitt.off('remove', remove)
})
</script>

<style lang="stylus" scoped></style>
